<template>
  <div class="cmt-item">
    <div class="cmt-info">
      <img
        :src="$axios.defaults.baseURL + commentList.account.defaultAvatar"
        alt=""
      />
      {{ commentList.account.nickname }}
      <i>{{ commentList.updated_at | moment }}</i>
      <span>1</span>
    </div>
    <div class="cmt-content">
      <commentParent
        :parentDepth="parentDepth"
        :commentList="commentList.parent"
        v-if="commentList.parent"
        @replyNicknameParent="replyNicknameParent"
      />

      <div class="cmt-new">
        <p class="cmt-message">{{ commentList.content }}</p>
        <el-row type="flex">
          <div v-if="commentList.pics.length === 0"></div>
          <div
            class="cmt-pic"
            v-else
            v-for="(images, i) in commentList.pics"
            :key="i"
          >
            <img :src="$axios.defaults.baseURL + images.url" alt="" />
          </div>
        </el-row>
        <div class="cmt-ctrl">
          <a href="javascript:;" @click="replyNickname">回复</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commentParent from "../comment/commentParent";
export default {
  components: {
    commentParent
  },
  props: ["commentList"],
  computed: {
    parentDepth() {
      let depth = 0;
      let current = this.commentList;
      while (current.follow) {
        depth += 1;
        current = current.follow;
      }
      return depth;
    }
  },
  methods: {
    replyNickname() {
      this.$emit("replyNickname", {
        id: this.commentList.id,
        nickname: this.commentList.account.nickname
      });
    },
    replyNicknameParent(parentInfo) {
      this.$emit("replyNickname", parentInfo);
    }
  }
};
</script>

<style lang="less" scoped>
.cmt-item {
  border-bottom: 1px dashed #ddd;
  padding: 20px 20px 5px;

  .cmt-info {
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;

    img {
      width: 16px;
      height: 16px;
      border-radius: 50%;
    }

    i {
      color: #999;
    }

    * {
      vertical-align: top;
    }

    span {
      float: right;
    }
  }

  .cmt-content {
    padding: 0 0 0 30px;

    .cmt-message {
      margin-top: 10px;
    }

    .cmt-pic {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      overflow: hidden;
      margin-right: 5px;
      margin-top: 10px;
      padding: 5px;
      border: 1px dashed #ddd;

      img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        cursor: pointer;
      }
    }
  }

  .cmt-ctrl {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #1e50a2;
    text-align: right;

    * {
      display: none;
    }
  }
}
.cmt-item:hover {
  a {
    text-decoration: underline;
    display: block;
  }
}
</style>
